import { Component } from "react";
import { Link } from "react-router-dom";
import { Tooltip } from "antd";
import { LeftChart, MidChart, RightChart } from "./chart";
import Earth3d from "../../components/earth3d";
import Card from "../../components/card";
import Map from "./map";
import { port } from "../../assets/global";
import style from "./index.module.css";
import fullscreenSvg from '../../assets/images/full-screen-enter.svg';
import wholePort from '../../assets/images/wholePort.jpg';

class Home extends Component{
    constructor(props){
        super(props);
        this.state = {
            "curPort": "xuweiPort"
        };
    }
    render(){
        return (
            <div className={style["content-grid"]}>
                <Card title="3D 地球" style={{"gridArea": "1 / 1 / span 5 / span 7"}} >
                    <Earth3d destinationPort={ (portName) => { this.onPortChange(portName) } } />
                    <Link to="/fullScreen">
                        <Tooltip placement="left" title={"全屏显示"}>
                            <img src={fullscreenSvg} alt="全屏" className={style["fullScreen"]} />
                        </Tooltip>
                    </Link>
                </Card>
                <Card title="港口工程" style={{ "gridArea": "1 / 8 / span 5 / span 10" }}>
                    <div className={style["port"]}>
                        <div className={style["portLeft"]}>
                            <p className={`${style["indent"]} ${style["portLeft-p"]}`}>
                                为了振兴连云港港口，实现连云港港口作为带动苏北经济、辐射中西部地区的重要战略，根据2008年3月交通部和江苏省联合批复的
                                《连云港港总体规划》，未来连云港将形成由湾内连云港区、湾外北翼的赣榆、前三岛港区和南翼的徐圩、灌河港区组成的“一体两
                                翼”总体格局。
                            </p>
                            <div>
                                {generateLinks()}
                            </div>
                        </div>
                        <div className={style["portRight"]}>
                            <img src={wholePort} alt="港口图标" className={style["portRight-img"]} />
                        </div>
                    </div>
                </Card>
                <Card title="港区卫星影像" style={{"gridArea": "1 / 18 / span 5 / span 7"}}>
                    <Map curPort={this.state.curPort} />
                </Card>
                <Card title="泊位数量" style={{"gridArea": "6 / 1 / span 3 / span 8"}}> 
                    <LeftChart />
                </Card>
                <Card title="货物吞吐量" style={{"gridArea": "6 / 9 / span 3 / span 8"}}> 
                    <MidChart />
                </Card>
                <Card title="岸线长度" style={{"gridArea": "6 / 17 / span 3 / span 8"}}> 
                    <RightChart /> 
                </Card>
            </div>
        );
    }

    onPortChange(curPort){
        this.setState({ curPort });
    }
}

function generateLinks(){
    let arr = [];
    let pro = "";
    for(pro in port){
        arr.push(
            <Link key={pro} to={`/port/${pro}`} className={style["portLeft-link"]}>{port[pro].alias} &gt;</Link>
        );
    }
    return arr;
}

export default Home;